<template>
    <div style="width: 100%">
        <h1>调班管理</h1>

        <el-dialog :title="headerTitle"  :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules"  ref="form">


                <el-form-item label="旧班级：" style="margin-left: 60px">
                    <el-select v-model="form.oldClassId" placeholder="请选择活动区域" style="width: 600px;margin-right: 60px">
                        <el-option :label="tableDatas.classesName" :value="tableDatas.id" v-for="tableDatas in this.tableData"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="新班级：" style="margin-left: 60px">
                    <el-select v-model="form.newClassId" placeholder="请选择活动区域" style="width: 600px;margin-right: 60px">
                        <el-option :label="tableDatas.classesName" :value="tableDatas.id" v-for="tableDatas in this.tableData"></el-option>
                    </el-select>
                </el-form-item>


                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="原班级进度：" label-width="90" prop="oldSchedule">
                            <el-input v-model="form.oldSchedule" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="新班级进度：" label-width="90" prop="newSchedule">
                            <el-input v-model="form.newSchedule" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="调班原因：" label-width="90" prop="content">
                            <el-input v-model="form.content" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-form-item label="调班时间：" style="margin-left: 60px;margin-right: 60px" prop="inputTime">
                    <el-date-picker
                            style="width: 600px"
                            v-model="form.inputTime"
                            type="datetime"
                            placeholder="选择调班时间"
                            align="right"

                    >
                    </el-date-picker>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
<!--                <el-button @click="handleReset">重置</el-button>-->
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handlerAddStudent">确 定</el-button>
            </div>

        </el-dialog>





        <!--学生列表-->
        <el-row :gutter="20">

            <el-col :span="3">
                <el-input
                        placeholder="请输入搜索内容"
                        v-model="student.name"
                        clearable
                        @clear="handleStudentList"
                >
                </el-input>
            </el-col>

            <el-col :span="1"><el-button type="primary" plain @click="handleStudentList">搜索</el-button></el-col>
        </el-row>



        <!--        列表-->
        <el-table
                v-loading="loading"
                ref="multipleTable"
                :data="pageInfo.list"
                tooltip-effect="dark"
                style="width: 90%;margin: 0 auto"
                @selection-change="handleSelectionChange">
>

            <el-table-column
                    label="学生姓名"
                    prop="student.name"
                    min-width="5%"
            >

            </el-table-column>

            <el-table-column
                    prop="oldClass.classesName"
                    label="旧班级"
                    min-width="5%">
            </el-table-column>
            <el-table-column
                    prop="newClass.classesName"
                    label="新班级"
                    min-width="5%"
            >
            </el-table-column>
            <el-table-column
                    prop="teacher.name"
                    label="录入人"
                    min-width="5%"
            >
            </el-table-column>
            <el-table-column
                    prop="oldSchedule"
                    label="原班级进度"
                    min-width="5%"
            >
            </el-table-column>
            <el-table-column
                    prop="newSchedule"
                    label="新班级进度"
                    min-width="5%"
            >
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="调班原因"
                    min-width="5%"
            >
            </el-table-column>
            <el-table-column
                    label="调班时间"
                    sortable
                    min-width="7%"
                    prop="inputTime"
            >
                <template slot-scope="scope">
                    <span>{{scope.row.inputTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="操作"
                    min-width="8%"
            >
                <template slot-scope="scope">

                    <el-tooltip content="编辑" placement="top">
                        <el-button
                                type="primary"
                                size="mini"
                                icon="el-icon-edit"
                                @click="handlerChange(scope.$index,scope.row)"
                        >编辑</el-button>
                    </el-tooltip>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--        分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                :hide-on-single-page="true"
                @current-change="handleStudentList"
        >
        </el-pagination>

    </div>

</template>

<script>
    export default {
        data() {

            return {

                form: {
                    newSchedule:'',
                    oldSchedule:'',
                    oldClass:'',
                    newClass:'',
                    classesName:'',
                    newClassId:'',
                    oldClassId:'',
                    inputTime: '',
                },
                rules:{
                    newSchedule: [
                        {required: true, message: '请输入新班级进度', trigger: 'blur'}
                    ],
                    oldSchedule: [
                        {required: true, message: '请输入旧班级进度', trigger: 'blur'}
                    ],
                    content:[
                        {required: true, message: '请输入调班原因', trigger: 'blur'}
                    ],

                    inputTime:[
                        {required: true, message: '请选择调班时间', trigger: 'blur'},
                    ],

                },
                pageNum:1,
                student: {sex:"全部"},

                pageInfo: {},

                studentList: [],
                multipleSelection: [],
                input:'',
                classesList: [],
                dialogFormVisible : false,
                loading: true,
                headerTitle:'',
                studentChangeList:[],
                studentChange:'',
                tableData:[]
            }

        },
        created() {
            this.handleStudentList();
            this.handleInitClasses();

        },
        methods: {
            //班级列表
            handleInitClasses() {
                this.$axios.get("http://localhost:8080/manage/classes/list").then(response => {
                    this.tableData = response.data.data;
                });
            },
            //列表 条件查询
            handleStudentList(pageNum) {
                this.loading = true;
                if (typeof pageNum == "number") {
                    this.pageNum = pageNum;
                } else {
                    this.pageNum = 1;
                }

                // console.log(this.student)
                this.$axios.post("/studentChange/list",{student: {name:this.student.name}},{params:{pageNum:this.pageNum}}).then(response => {
                    this.pageInfo = response.data.studentChangeList;
                    console.log(response)
                    // this.studentList = response.data.studentList.list;
                    // this.classesList = response.data.classesList;
                    this.loading = false;
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },


            //添加
            handlerAddStudent() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.dialogFormVisible = false;
                        this.$axios.post("/studentChange/save", this.form).then(response => {
                            /*if (response.code != 10001) {
                                this.handleStudentList();
                                this.form = {
                                };
                            }*/
                            this.handleStudentList();
                        })

                    }

                });

            },
            //修改
            handlerChange(index, row) {

                this.$axios.post("/studentChange/findById/" + row.id).then(response => {
                    this.form = response.data.studentChange;
                    console.log(response)
                    this.headerTitle="修改学生";
                    this.dialogFormVisible = true;
                });
                //this.handleStudentList();
            },
            //单个删除
            handleDelete(row){
                this.$confirm('确认删除该学生, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get("/studentChange/delete?id="+row.id).then(response=>{
                        this.handleStudentList();
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

        }
    }
</script>

<style scoped>

</style>